<script setup lang="ts">
import MpHtml from 'mp-html/src/uni-app/components/mp-html/mp-html.vue'
import { fetchAppointmentDetailAPI } from '@/apis/fetchAppointmentDetail'
import { useUserInfoStore } from '@/store/userInfo'

const router = useRouter()
const userInfoStore = useUserInfoStore()

const loading = ref(false)
const recordId = ref('')
const detail = ref<AppointmentDetail | null>(null)

onLoad(async (options) => {
  if (options && options.id) {
    loading.value = true
    recordId.value = options.id
    const res = await fetchAppointmentDetailAPI(
      { id: options.id },
      userInfoStore.userInfo!.token!,
    )
    if (res.data?.code === 1) {
      detail.value = res.data.data
      loading.value = false
    }
    else {
      uni.showToast({ title: res.data?.msg, icon: 'none' })
      loading.value = false
    }
  }
})

const statusName = computed(() => {
  return ['未到店', '已到店', '已取消'][Number(detail.value?.status) - 1]
})

function handleViewFollowUpRecordList() {
  router.push({
    name: 'followUpRecord',
    params: { id: detail.value?.id.toString() || '' },
  })
}
</script>

<template>
  <view class="absolute left-0 top-0 h-520rpx w-screen from-#4999F7 to-#78D9FE to-opacity-0 bg-gradient-to-b" />
  <view class="relative z-1">
    <Spacer height="60" />
    <view class="flex items-center justify-between">
      <view class="flex items-center">
        <image class="h-42rpx w-42rpx" src="@/static/images/record_outline.png" />
        <Spacer width="16" />
        <view class="text-40rpx text-white font-semibold leading-56rpx">
          预约到店
        </view>
      </view>
      <view class="border-1px border-white rounded-full border-solid px-22rpx py-8rpx text-28rpx text-white font-semibold leading-40rpx">
        {{ statusName || '未知' }}
      </view>
    </view>
    <Spacer height="40" />
    <block v-if="detail?.status.toString() === '2'">
      <view class="overflow-hidden rounded-20rpx bg-white">
        <ListCell label="服务消费金额：" justify="normal">
          <ListValue>
            <view class="text-40rpx text-#4999F7 font-semibold leading-56rpx">
              ¥ {{ detail.free_money || '未知' }}
            </view>
          </ListValue>
        </ListCell>
        <Divider width="622" color="#E6E6E6" />
        <ListCell label="下次预约时间：" justify="normal">
          <ListValue>
            {{ detail.next_visit_time || '未知' }}
          </ListValue>
        </ListCell>
      </view>
      <Spacer height="24" />
    </block>
    <block v-if="detail?.status.toString() === '3'">
      <view class="overflow-hidden rounded-20rpx bg-white">
        <ListCell label="取消原因：" justify="normal">
          <ListValue>
            <view class="text-#4999F7">
              {{ detail.reason || '未知' }}
            </view>
          </ListValue>
        </ListCell>
        <Divider width="622" color="#E6E6E6" />
        <ListCell label="备注：" justify="normal">
          <ListValue>
            {{ detail.reason_remark || '无备注' }}
          </ListValue>
        </ListCell>
      </view>
      <Spacer height="24" />
    </block>
    <view class="overflow-hidden rounded-20rpx bg-white">
      <ListCell label="预约项目：" justify="normal">
        <ListValue>
          <view class="text-#4999F7">
            {{ detail?.visit_project_ids || '未知' }}
          </view>
        </ListValue>
      </ListCell>
      <Divider width="622" color="#E6E6E6" />
      <ListCell label="预约时间：" justify="normal">
        <ListValue>
          {{ detail?.visit_time || '未知' }}
        </ListValue>
      </ListCell>
      <Divider width="622" color="#E6E6E6" />
      <ListCell label="预约姓名：" justify="normal">
        <ListValue>
          {{ detail?.user_name || '未知' }}
        </ListValue>
      </ListCell>
      <Divider width="622" color="#E6E6E6" />
      <ListCell label="性别：" justify="normal">
        <ListValue>
          {{ detail?.sex || '未知' }}
        </ListValue>
      </ListCell>
      <Divider width="622" color="#E6E6E6" />
      <ListCell label="年龄：" justify="normal">
        <ListValue>
          {{ detail?.age || '未知' }}
        </ListValue>
      </ListCell>
      <Divider width="622" color="#E6E6E6" />
      <ListCell label="手机号：" justify="normal">
        <ListValue>
          {{ detail?.mobile || '未知' }}
        </ListValue>
      </ListCell>
      <Divider width="622" color="#E6E6E6" />
      <ListCell label="备注：" justify="normal">
        <ListValue>
          {{ detail?.remark || '无备注' }}
        </ListValue>
      </ListCell>
    </view>
    <Spacer height="40" />
    <block v-if="detail?.status.toString() === '2'">
      <Title>诊断档案</Title>
      <Spacer height="24" />
      <view class="overflow-hidden rounded-20rpx bg-white">
        <view class="p-24rpx">
          <MpHtml :content="detail.content || '无'" />
        </view>
      </view>
    </block>
    <block v-if="detail?.message.length">
      <block v-for="m in detail.message" :key="m.content">
        <Spacer height="40" />
        <Title>医生建议</Title>
        <Spacer height="24" />
        <view class="overflow-hidden rounded-20rpx bg-white">
          <view class="p-24rpx">
            <MpHtml :content="m.content || '无'" />
          </view>
        </view>
      </block>
    </block>
    <Spacer height="320" />
  </view>
  <button
    v-if="detail?.status.toString() === '2'"
    class="fixed bottom-0 z-2 h-128rpx w-screen flex items-center justify-center rounded-0 bg-#4999F7 text-32rpx text-white leading-45rpx x-center"
    @tap="handleViewFollowUpRecordList"
  >
    <image class="h-34rpx w-36rpx" src="@/static/images/box.png" />
    <Spacer width="16" />
    复诊记录
  </button>
  <uv-loading-page :loading="loading" loading-text="加载中..." font-size="28rpx" loading-mode="spinner" />
</template>

<route lang="yaml">
name: 'recordDetail'
style:
  navigationBarTitleText: '就诊详情'
</route>
